<template>
  <div class="main-box">
    <span>{{ thatPage === 1 ? '加速' : '个人中心' }}</span>
    <span class="func-button-close"></span>
    <span class="func-button-mini"></span>
    <div class="speed">
      <img src="@/assets/upload.png" alt="">
      <span style="margin-left: 6px;margin-right: 6px;">0.00K</span>
      <img src="@/assets/download.png" alt="">
      <span style="margin-left: 6px;">0.00K</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopBar',
  computed: {
    thatPage () {
      return this.$store.state.page
    }
  },
  mounted () {
    let element = document.querySelector('.func-button-close')
    element.addEventListener('mouseenter', (e) => {
      console.log(e)
    })
  }
}
</script>

<style scoped>
.main-box {
  height: 67px;
  width: calc(100vw - 78px);
  background-color: #fff;
  display: flex;
  align-items: center;
}

.main-box > span {
  margin-left: 20px;
  font-size: 1.3rem;
  color: #001529;
}

.func-button-close {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  width: 36px;
  height: 20px;
  background-image: url(../assets/close_noactive.png);
}

.func-button-mini {
  display: inline-block;
  position: absolute;
  right: 36px;
  top: 0;
  width: 36px;
  height: 20px;
  background-image: url(../assets/mini_noactive.png);
}

.func-button-close:hover {
  background-image: url(../assets/close_active.png);
}

.speed {
  position: absolute;
  right: 20px;
}
</style>
